iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0

第 23 天 !

使用 context 來傳送,雖然達到了能跟 目標 component 直接對接的功能,

但是這樣產生了問題,

由於可以直接傳遞到 component , 這樣會導致數據混亂,不好維護,

打個比方,

<App>
  <Child1>
    <Child2>
      <Child3></Child3>
    </Child2>
  </Child1>
</App>

當我在 Child1 & Child3 使用 context 獲取資料,

當 context 更新, 同時會觸發 Child1 & Child2 & Child3re-render , 這樣無疑會增加效能的消耗


另外,由於資料的傳送是以廣播的形式送出,

context 更新,

只要是使用這個 contextcomponent

都會被強制更新,

就算當下改變的資料跟這個 component 沒關係,

還是會做 re-render 的動作

這無疑增加我們的效能成本


那還有其他選擇嘛?

有! 就是我們之後介紹的 Redux

但是我們要先來討論一下, flux

Flux

什麼是 flux ?

它是由 facebook 提出的 design pattern

定義前端如何去做資料的變化&保存,

核心概念就是 單向資料流

flux 定義了三種主要部分:

action

定義改變資料的行為,

比如:一個計算機,我目前的動作是加法,那我要把輸入的數字做加總

這就是一個 加法動作

那要完成這個動作會分為 action & action creator

通常會用 function 定義 actiontype & 相關需要的參數,

最後把輸出的 action 遞給 dispatch

like:

const actionCreator = (count)=>{
  const action = {
    type: 'ADD',
    payload:{
      count
    }
  }
  dispatch(action);
}

dispatcher

是連接 action & store 的橋樑,

根據action 的資料做相關的處理, 並保存到 store 裡

store

保存資訊的地方,只有 dispatch 可以改變資料,

其他地方只能做讀取的動作,

當資料發生變化,

會發出通知告知 View 資料轉變

PS. Store 可以不只一個


這是flux 官方的結構圖
https://ithelp.ithome.com.tw/upload/images/20211008/20112878OAOTaxeJT5.png

這樣我們可以很清楚的看到,所有的動作都是單向的,

action 告知動作 > dispatcher 針對動作改變資料 > store 保存 > view 顯示

這樣的好處是,我們可以清晰的知道每個動作會影響的資料,

當發生錯誤時,我們可以了解在哪個動作發生了狀況


上一篇
Day 22 Context
下一篇
Day 24 Redux 簡介
系列文
React Native & Redux 初步探討33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言